@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap");

$font-primary: "Quicksand", sans-serif;

:root {
   --red: #ff4155;
   --black: #150001;

   --bg-primary: #050505;
   --bg-secondary: #131417;

   --color-disabled: #8f8f8f;
}

html {
   --color-primary: #9e71ff;
   
   --bg-primary: #050505;
   --bg-secondary: #131417;

   --bg-content: #24292d;
   --bg-content-active: #24292d;
   --bg-content-hover: #2c3236;
   --bg-content-border: #050505;
   --bg-content-dot: #2a2c30;
   --bg-container: #1c1e21;
   --bg-divider: #2c3236;
   --bg-modal: #24292d;
   --bg-button: #d3d3d3;

   --icon-border: #1d1e21;
   --icon-shadow: #4a4e51;

   --text-primary: #e3e3e3;
   --text-secondary: #b1b1b1;
   --text-tertiary: #e3e3e3;
   --text-button: #150001;
}

html[data-theme="dark"] {
   --bg-primary: #050505;
   --bg-secondary: #131417;

   --bg-content: #24292d;
   --bg-content-active: #24292d;
   --bg-content-hover: #2c3236;
   --bg-content-border: #050505;
   --bg-content-dot: #2a2c30;
   --bg-container: #1c1e21;
   --bg-divider: #2c3236;
   --bg-modal: #24292d;
   --bg-button: #d3d3d3;

   --icon-border: #1d1e21;
   --icon-shadow: #4a4e51;

   --text-primary: #e3e3e3;
   --text-secondary: #b1b1b1;
   --text-tertiary: #e3e3e3;
   --text-button: #150001;
}

html[data-theme="light"] {
   --bg-primary: #f3f5fa;
   --bg-secondary: #fff;

   --bg-content: #f3f5fa;
   --bg-content-active: #1c1e21;
   --bg-content-hover: #e3e7f0;
   --bg-content-border: #494d55;
   --bg-content-dot: #aaa;
   --bg-container: #f3f5fa;
   --bg-divider: #c2c9d6;
   --bg-modal: #f9f9fb;
   --bg-button: #1c1e21;

   --content-shadow: 3px 10px 40px rgba(24, 29, 32, 0.05);

   --icon-border: #c2c9d6;
   --icon-shadow: #f3f4f6;

   --text-primary: #020202;
   --text-secondary: #5e636e;
   --text-tertiary: #e3e3e3;
   --text-button: #e3e3e3;
}

html[data-accent="purple"] {
   --color-primary: #782fef;
}

html[data-accent="purple"][data-theme="dark"] {
   --color-primary: #9e71ff;
}

html[data-accent="green"] {
   --color-primary: #008736;
}

html[data-accent="green"][data-theme="dark"] {
   --color-primary: #45d09e;
}

html[data-accent="blue"] {
   --color-primary: #1771f1;
}

html[data-accent="blue"][data-theme="dark"] {
   --color-primary: #5199ff;
}

html[data-accent="orange"] {
   --color-primary: #922d25;
}

html[data-accent="orange"][data-theme="dark"] {
   --color-primary: #d8664d;
}

html[data-accent="turquoise"] {
   --color-primary: #337976;
}

html[data-accent="turquoise"][data-theme="dark"] {
   --color-primary: #2a9d8f;
}

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

svg {
   pointer-events: none;
   color: inherit;
}

button {
   border: none;
   background: none;
   cursor: pointer;
   font-family: inherit;
   font-size: inherit;
   color: inherit;
}

html {
   font-size: 62.5%;
   font-family: $font-primary;
   -webkit-tap-highlight-color: transparent;
}

html,
body {
   height: 100%;
   width: 100%;

   @media (max-height: 528px) {
      height: 100vh;
      min-height: 40rem;
   }
}

body {
   background-color: var(--bg-primary);
   font-size: 1.6rem;
   padding: 1rem;
   color: var(--text-secondary);

   @media (max-width: 825px) {
      padding: 0;
   }
}

/* Chrome, Safari, Edge, Opera */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
   -webkit-appearance: none;
   margin: 0;
}

/* Firefox */
input[type="number"] {
   appearance: textfield;
   -moz-appearance: textfield;
}

.title {
   margin-bottom: 2rem;
   text-align: center;
   font-size: 1.4rem;
   text-transform: uppercase;
   color: var(--text-secondary);
}

/* ############################## */
/* Ripple Styling */
/* ############################## */

.ripple {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   pointer-events: none;
   overflow: hidden;
   border-radius: 1rem;

   --top: 0;
   --left: 0;
   --color: rgba(255, 255, 255, 0.5);
   --duration: 500ms;
   --scaleSize: 20;

   &::before {
      content: "";
      display: block;
      position: absolute;
      top: var(--top);
      left: var(--left);
      overflow: hidden;
      height: 10px;
      width: 10px;
      background-color: var(--color);
      opacity: 0.3;
      border-radius: 50%;
      animation: ripple var(--duration) linear forwards;
      pointer-events: none;
   }
}

@keyframes ripple {
   from {
      transform: scale(0);
   }

   to {
      transform: scale(var(--scaleSize));
      opacity: 0;
   }
}

/* ############################## */
/* Scrollbar Styling */
/* ############################## */

::-webkit-scrollbar {
   width: 0.5rem;
   height: 0.5rem;
   background-color: transparent;
}

::-webkit-scrollbar-corner {
   background: none;
}

::-webkit-scrollbar-track {
   background: transparent;
   border-radius: 2rem;
   margin: 1rem;
}

::-webkit-scrollbar-thumb {
   border-radius: 2rem;
   background-color: #2b323c;
}

@keyframes fade-in {
   0% {
      opacity: 0;
   }
   100% {
      opacity: 1;
   }
}